// apps/app1/src/main.ts
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router"; // 引入路由
import { createPinia } from "pinia";
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
import * as ElementPlusIconsVue from "@element-plus/icons-vue";
import * as CustomerCom from "@yuppie/components";
let app: any = null;

function render(props: any = {}) {
  const { container } = props;
  app = createApp(App);

  // 注册图标
  for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component);
  }

  // 使用路由、Pinia、ElementPlus
  app.use(router);
  app.use(createPinia());
  app.use(ElementPlus);
  // 遍历导入的组件对象，将所有组件注册为全局组件
  for (const [key, component] of Object.entries(CustomerCom)) {
    // 假设你的组件在导出时，键（key）就是你希望在模板中使用的标签名
    app.component(key, component);
  }

  // 挂载到容器
  app.mount(container ? container.querySelector("#app") : "#app");
}

// 独立运行时
if (!(window as any).__POWERED_BY_QIANKUN__) {
  render();
}

// qiankun 生命周期函数
export async function bootstrap() {
  console.log("微应用 app1 启动");
}

export async function mount(props: any) {
  console.log("微应用 app1 挂载", props);
  render(props);
}

export async function unmount() {
  console.log("微应用 app1 卸载");
  app.unmount();
  app = null;
}
